<!DOCTYPE html>
<html>
    <head>
        <title>Group List</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <!-- <script type="text/javascript" src="../../script/ao_module.js"></script> -->
    </head>
    <body>
        <div class="ui container">
            <div class="ui basic segment">
                <div class="ui header">
                    <i class="users icon"></i>
                        <div class="content">
                        Group Permissions
                        <div class="sub header">Manage group permission and access right</div>
                    </div>
                </div>
                <button class="ui primary small button" onclick="newgroupInterface();">
                    <i class="add icon"></i>New Group
                </button>
                <button id="editGroupButton" class="ui small disabled button" onclick="openEditWindow();">
                    Edit
                </button>
                <button id="removeGroupButton" class="ui small negative disabled right floated button" onclick="removeGroup();">
                    Remove
                </button>
            </div>

            <table class="ui very basic celled table">
                <thead>
                    <tr>
                        <th>Group Name</th>
                        <th>Access Permission</th>
                        <th>Admin Privileges</th>
                        <th>Default Storage Quota</th>
                        <th>Select</th>
                    </tr>
                </thead>
                <tbody id="groupList" >
                    <tr>
                        <td>administrator</td>
                        <td>All Modules (Administrator)</td>
                        <td>
                            <div class="ui checkbox">
                                <input type="radio" name="selectUser" onchange="enableEdit(this);">
                                <label></label>
                            </div>
                        </td>
                    </tr>
                </tbody>
              </table>
        </div>
        <script>
            var groupPermissionInfo = [];
            var currentSelectedGroup = "";

            loadGroupList();
            function loadGroupList(){
                $.get("../../system/permission/listgroup?showper=true",function(data){
                   $("#groupList").html("");
                   $("#editGroupButton").addClass("disabled");
                   $("#removeGroupButton").addClass('disabled');
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        for (const [key, value] of Object.entries(data)) {
                            //Check for module list
                            var accessPermission = "No Module Accessible";
                            if (value[0].includes("*")){
                                accessPermission = "All Modules (Administrator)";
                            }else{
                                accessPermission = '<div class="ui bulleted list">';
                                for (var i =0; i < value[0].length; i++){
                                    accessPermission += '<div class="item">' + value[0][i] + '</div>';
                                }
                                accessPermission += '</div>'
                            }

                            //Check for admin permission
                            var isAdminIcon = "<i class='red remove icon'></i>"
                            if (value[1] == true){
                                isAdminIcon = "<i class='green checkmark icon'></i>"
                            }

                            //Check for storage quota
                            var quota = bytesToSize(value[2]);
                            if (value[2] == 0){
                                quota = "Read Only";
                            }else if (value[2] == -1){
                                quota = "Unlimited";
                            }

                            $("#groupList").append(`
                            <tr>
                                <td>${key}</td>
                                <td>${accessPermission}</td>
                                <td>${isAdminIcon}</td>
                                <td>${quota}</td>
                                <td>
                                    <div class="ui checkbox">
                                        <input type="radio" name="selectUser" value="${key}" onchange="enableEdit(this);">
                                        <label></label>
                                    </div>
                                </td>
                            </tr>
                            `);
                        }
                        groupPermissionInfo = data;
                    }

                    
                });
            }

            function openEditWindow(){
                ao_module_newfw({
                    url: "SystemAO/users/editgroup.html#" + encodeURIComponent(JSON.stringify(currentSelectedGroup)),
                    width: 560,
                    height: 768,
                    appicon: "SystemAO/users/img/users-white.svg",
                    title: "Edit User Group",
                    parent: ao_module_windowID,
                    callback: "confirmCreateHandler"
                });
            }

            function bytesToSize(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            }


            function enableEdit(obj){
                //console.log($(obj).val());
                $("#editGroupButton").removeClass('disabled');
                if ($(obj).val() != "administrator"){
                    $("#removeGroupButton").removeClass('disabled');
                }else{
                    $("#removeGroupButton").addClass('disabled');
                }
                currentSelectedGroup = $(obj).val();
                
            }

            function newgroupInterface(){
                ao_module_newfw({
                    url: "SystemAO/users/newgroup.html",
                    width: 560,
                    height: 768,
                    appicon: "SystemAO/users/img/users-white.svg",
                    title: "Create User Group",
                    parent: ao_module_windowID,
                    callback: "confirmCreateHandler"
                });
            }

            //Finished adding group. Update grouplist
            function confirmCreateHandler(data){
                if (data){
                    loadGroupList();
                }
            }

            //Remove the selected group
            function removeGroup(){
                if (currentSelectedGroup == "administrator"){
                    //This group cannot be removed
                    alert("You cannot remove the administrator group.")
                }else{
                    //Remove the selected group
                    if (confirm("Confirm removing group: " + currentSelectedGroup + " ?")){
                        $.ajax({
                            url: "../../system/permission/delgroup",
                            data: {groupname: currentSelectedGroup},
                            method: "GET",
                            success: function(data){
                                if (data.error !== undefined){
                                    alert(data.error);
                                }else{
                                    //Remove succeed. refresh list
                                    loadGroupList();
                                }
                            }

                        })
                    }
                }
            }
        </script>
    </body>
</html>